<template>
  <div class="login">
    登录
    <div class="outer">
      <!-- 头像 -->
      <div class="avatar">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 内容 -->
      <div class="lis">
        <el-form
          :model="loginForm"
          status-icon
          :rules="loginFormRules"
          ref="LoginFormRef"
          label-width="100px"
          class="login_form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password">
            <el-input
              v-model="loginForm.password"
              prefix-icon="iconfont icon-suo"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="login">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [
          {
            required: true,
            message: '请输入登录名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '登录名在3-10之间',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 10,
            message: '登录名在4-10之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login () {
      // 首先判断一下登录的时候是不是符合验证规则;
      this.$refs.LoginFormRef.validate(async (valid) => {
        if (!valid) {
          return 
        }
        this.$api.login(this.loginForm).then(res=>{
          console.log(this.loginForm,res,'login')
            if(res.data.code===1){
              this.$message.success(res.data.message)
              window.localStorage.setItem("token", res.data.data.token);
              this.$router.push('/home')
            }
        })
      })
    },
    resetForm () {
      // this.$refs.loginFormRef.resetFields()
      this.loginForm.username=''
      this.loginForm.password=''
    }
  }
}
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #b6dafa;
}
.outer {
  width: 540px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 30px;
  .avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #c6f8ec;
    margin: 5px auto;
    img {
      width: 90px;
      height: 90px;
      padding: 12px;
    }
  }
}
</style>
